<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style type="text/css">
    .red {
        color: red;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
    {{ message }}
    {{ rawHtml }}
    <div v-html="rawHtml"></div>
    <p v-bind:class="color">test</p>
    <p>{{ number + 1}}</p>
    <p>{{ ok ? 'YES' : 'NO'}}</p>
    <p v-bind:style="style">test</p>
    <p>{{ split.split('').reverse().join('')}}</p>
    <p v-if=see>see me</p>
    <div @click="click1" id="1">
        <div @click.stop="click2(message)" id="2">点击事件</div>
    </div>

    <!--默认调用display属性-->
    <span v-show="see2">看见我了</span>

    <table>
        <tr v-for="list,index in lists">
            <td v-text="index"></td>
            <td v-text="list.id"></td>
            <td v-text="list.name"></td>
            <td v-text="list.age"></td>
            <td>
                <button @click=click3(list)>点击</button>
            </td>
        </tr>
    </table>

    <li v-for="value,key in a">{{key}}:{{value}}</li>

    <input :disabled="operation">

    <div>
        <button v-on:click="counter += 1">点击事件 {{counter}}</button>
        <button v-on:click="greet('abc',$event)" id="111">点击事件</button>
    </div>

</div>

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
    <br>
    <input v-model="messageStr" placeholder="edit me">
    <p>messageStr is {{messageStr}}</p>
    <textarea v-model="messageStr2" placeholder="add multiple lines"></textarea>
    <p style="white-space: pre-line">{{messageStr2}}</p>
    <div style="margin-top: 20px">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>{{checkedNames}}</span>
    </div>
    <div style="margin-top: 20px">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{picked}}</span>
    </div>
    <div>
        <button v-on:click="submit">提交</button>
    </div>
</div>


<script>
    var lists = [
        {"id": "1", "name": "张三", "age": "12"},
        {"id": "2", "name": "李四", "age": "13"},
        {"id": "3", "name": "王五", "age": "14"},
    ]
    var a = {"id": "1", "name": "张三", "age": "12"}

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            rawHtml: "<span style='color: red'>hello vue!</span>",
            color: "red",
            style: "color:red",
            number: 2,
            ok: true,
            split: "vue",
            see: false,
            see2: false,
            lists: lists,
            a: a,
            operation: "disabled",
            counter: 0
        },
        methods: {
            click1: function () {
                console.log(1);
            },
            click2: function (obj) {
                console.log(this)
            },
            click3: function (id) {
                console.log(id.id)
            },
            greet: function (str, event) {
                console.log("str", str)
                console.log("event", event)
                console.log("list", this.lists)
            }
        }
    })
    var app1 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString(),
            messageStr: '',
            messageStr2: '',
            checkedNames: ["Jack","John"],
            picked: 'One'
        },
        methods: {
            submit: function () {
                var data = {
                    msg1: this.messageStr,
                    msg2: this.messageStr2,
                    checked: this.checkedNames,
                    pic: this.picked,
                }
                console.log(data)

            }
        }

    })

    app.message = "hello word"
    app.ok = false
</script>
</body>
</html>